<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 通过meta标签,设定读取网络来源图片 -->
    <meta name="referrer" content="never">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/detail.css">
    <style>
        .num {
            width: 73px;
            height: 73px;
            font-size: 16px;
            text-align: center;
            display: block;
            margin: 50px 0 0 0;
            font-size: 20px;
            color: #000;
        }
        
        .jian {
            position: absolute;
            top: 0;
            left: 82px;
        }
        
        .jia {
            position: absolute;
            top: 38px;
            left: 82px;
        }
    </style>
</head>

<body>
    <h1>商品详情页面</h1>

    <div class="container"></div>

    <script src="../js/jquery.min.js"></script>
    <script src="../js/tools.js"></script>
    <script src="../js/cookie.js"></script>
    <script>
        // 定义全局变量 存储 商品信息
        let goodsMsg;

        // 1, 获取地址栏参数
        const urlObj = getUrlVal();
        // console.log(urlObj);

        // 2, 根据 goods_id 向 后端数据库 
        // 通过 promise 发送请求
        // 获取结果 动态渲染生成页面
        const p = new Promise(function(f, r) {
            // 发送ajax请求
            $.ajax({
                url: '../server/goods_detail.php',
                type: 'post',
                data: {
                    goods_id: urlObj.goods_id
                },
                dataType: 'json',
                success: f,
                error: r,
            })
        })

        // 请求成功,动态渲染生成页面
        p.then(function(res) {
            // 给全局变量赋值
            goodsMsg = res;
            console.log(res);

            // 动态生成页面内容
            let str = `
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">商品详细信息</h3>
        </div>
        <div class="panel-body">
          <div class="media">
            <div class="media-left">
              <a href="#">
                <img class="media-object" src="${res.goods_small_logo}" alt="...">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">${res.goods_name}</h4>
              <p>
                <i class="glyphicon glyphicon-yen"></i>
                <span>${res.goods_price}</span>
              </p>
              <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">XL</button>
                <button type="button" class="btn btn-default">L</button>
                <button type="button" class="btn btn-default">M</button>
                <button type="button" class="btn btn-default">S</button>
                <button type="button" class="btn btn-default">XS</button>
              </div>
              <p style="position:relative">
                  <input value="1" class="num">
                  <button name="-" type="button" class="jian btn btn-default" >-</button>
                  <button name="+" type="button" class="jia btn btn-default">+</button>
              </p>
              <p>
                <a href="javascript:;" class="btn btn-warning btn-lg" role="button">立即购买</a>
                <a name="inCart" href="JavaScript:;" class="btn btn-danger btn-lg" role="button">加入购物车</a>
              </p>
            </div>
          </div>
          <ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="#">商品详细信息</a></li>
            <li role="presentation"><a href="#">商品参数信息</a></li>
            <li role="presentation"><a href="#">相关商品</a></li>
          </ul>
          <div>
              ${res.goods_introduce}
          </div>
        </div>
      </div>
    `;

            // 写入页面
            $('.container').html(str);
        })

        // 3, 购物车按钮 添加点击事件
        // 通过 事件委托 语法 完成 添加事件
        $('.container').click(function(e) {
            // 通过事件委托 判断 点击的是 加入购物车 按钮

            if (e.target.getAttribute('name') === 'inCart') {
                // 1, 获取 cookie的数据
                const cookieObj = myGetCookie();

                // 2, 如果 cookieObj.login 是 undefined 证明 没有登录信息
                if (cookieObj.login === undefined) {
                    if (window.confirm('您还没有登录,点击确定,跳转登录页面')) {
                        // 没有登录
                        window.location.href = `./login.html?url=${window.location.href}`;
                    }
                } else {
                    // 已经登录
                    // 将数据加入购物车


                    if (!($('.num').val() - 0 >= 1 && $('.num').val() - 0 <= goodsMsg.goods_number - 0)) {
                        // 弹出提示信息
                        window.alert(`您收入的购买数量有误,必须是大于1 小于${goodsMsg.goods_number}`);

                        if ($('.num').val() - 0 < 1) {
                            // 赋值1
                            $('.num').val(1);
                            // 减禁用
                            $('[name="-"]').prop('disabled', true);
                            // 加可以用
                            $('[name="+"]').prop('disabled', false);
                        } else if ($('.num').val() - 0 > goodsMsg.goods_number - 0) {
                            // 赋值库存
                            $('.num').val(goodsMsg.goods_number);
                            // 加禁用
                            $('[name="+"]').prop('disabled', true);
                            // 减禁用
                            $('[name="-"]').prop('disabled', false);
                        }


                        return;
                    }


                    let cart = localStorage.cart;



                    if (cart === undefined) {



                        goodsMsg.num = $('.num').val();

                        goodsMsg.buy = true;


                        const arr = [];

                        arr.unshift(goodsMsg);

                        localStorage.cart = JSON.stringify(arr);

                        // 有购物车信息,添加
                    } else {
                        // 将 json字符串还原为数组
                        cart = JSON.parse(cart);

                        // 判断 有没有这个商品 true有这个商品 false没有这个商品
                        let bool = cart.some(function(item) {
                            // 购车中存储商品的 goods_id 和 当前页面中显示商品的goods_id

                            return item.goods_id === goodsMsg.goods_id;
                        })

                        if (bool) {

                            // 循环遍历 购物车数组 找到 goods_id 相同的数据
                            for (let i = 0; i <= cart.length - 1; i++) {
                                if (cart[i].goods_id === goodsMsg.goods_id) {
                                    // 存储购买数量的属性 属性值 累加1
                                    cart[i].num++;
                                    break;
                                }
                            }
                        } else {
                            // 购物车中 没有 当前商品 在 起始位置 新增当前商品

                            goodsMsg.num = $('.num').val();
                            goodsMsg.buy = true;

                            cart.unshift(goodsMsg);
                        }

                        // 将 新的数组数据 写入 localStorage 购物车信息
                        localStorage.cart = JSON.stringify(cart);

                    }

                    // 跳转购物车页面
                    window.location.href = './cart.html';
                }

                // 如果 点击标签 name 是 - 证明点击的是 购买数量 -1 的 按钮
            } else if (e.target.getAttribute('name') === '-') {
                // 给 class 是 num的标签 value值 累减1

                $('.num').val($('.num').val() - 1);

                // 写在点击事件中的 只有点击 才会触发

                if ($('.num').val() === '1') {
                    e.target.disabled = true;
                }

                // 执行执行了 减 操作 +按钮 就能用了
                $('[name="+"]').prop('disabled', false);

                // 如果 点击标签 name 是 + 证明点击的是 购买数量 +1 的 按钮
            } else if (e.target.getAttribute('name') === '+') {
                // 给 class 是 num的标签 value值 累加1

                $('.num').val($('.num').val() - 0 + 1);
                // 写在点击事件中的 只有点击 才会触发

                // 如果 购买数量已经 达到库存 禁用 + 标签
                if ($('.num').val() === goodsMsg.goods_number) {
                    // 禁用 + 标签
                    $('[name="+"]').prop('disabled', true);
                }

                // 判断 减按钮 是不是 禁用

                $('[name="-"]').prop('disabled', false);
            }
        })
    </script>
</body>

</html>